<template>
  <div class="followUpList">
    <div class="relative">
      <TitleName
        title="回访情况"
        icon="i-carbon-bookmark-filled"
        class="title absolute z-1 top-0 left-0"
      ></TitleName>
      <!-- 查询条件 -->
      <!-- <avue-form :option="queryFormOption" v-model="queryForm">
        <template #menu-form="{}">
          <el-button
            type="primary"
            plain
            icon="Download"
            @click="handleDownload"
            >导出</el-button
          >
        </template>
      </avue-form> -->
    </div>
    <div class="followUpList-cnt app-container">
      <div class="chatCnt" v-if="tableTotal > 0">
        <div
          v-for="(item, index) in tableData"
          :key="index"
          class="chatCnt-box"
        >
          <el-row :span="24">
            <el-col :span="14" class="text-#000 text-16px">
              <div class="inline-block ml-10px text-#666 text-14px">
                回访
                <span v-if="item.productName">({{ item.productName }})</span>
              </div>
            </el-col>
            <el-col :span="10" class="text-right">{{
              parseTime(item.followTime)
            }}</el-col>
            <el-col :span="24" class="mt-10px"
              ><p style="word-break: break-all" class="m-0">
                {{ item.content }}
              </p></el-col
            >
          </el-row>
          <el-row :span="24" class="text-12px leading-32px mt-10px">
            <el-col
              :span="20"
              v-if="item.sysAttachFiles && item.sysAttachFiles.length > 0"
            >
              <span class="text-#666">附件：</span>
              <div
                v-for="files in item.sysAttachFiles"
                :key="files.fileName"
                class="inline-block"
              >
                <a
                  :href="files.url"
                  target="_blank"
                  class="mr-10px text-#1890ff"
                  >{{ files.origFileName }}</a
                >
              </div>
            </el-col>
            <el-col
              :span="4"
              :offset="
                item.sysAttachFiles && item.sysAttachFiles.length > 0 ? 0 : 20
              "
              class="text-right"
            >
              <!-- <el-button
                icon="ChatLineRound"
                @click="handleComment(item, index)"
                >评论{{
                  item.commitVos && item.commitVos.length > 0
                    ? '(' + item.commitVos.length + ')'
                    : ''
                }}</el-button
              > -->
            </el-col>
          </el-row>
          <div class="comment">
            <div class="flex-1 text-right">
              <el-button
                type="primary"
                @click="handleContinue(item)"
                :disabled="item.createBy == userStore.userInfo.userId"
                >编辑</el-button
              >
              <el-button
                type="primary"
                @click="delCmit(item)"
                :disabled="item.createBy == userStore.userInfo.userId"
                >删除</el-button
              >
            </div>
            <div v-if="item.commitVos" class="mt-10px">
              <div
                class="comment-box"
                v-for="el in item.commitVos"
                :key="el.id"
              >
                <div class="flex">
                  <div class="flex-1 pt-10px">
                    <span class="text-#000 text-16px mr-10px flex-1">{{
                      el.userName
                    }}</span
                    >{{ parseTime(el.createTime) }}
                  </div>
                  <div class="flex-1 text-right">
                    <i class="p-10px pointer text-25px" @click="delCmit(el)"
                      >×</i
                    >
                  </div>
                </div>
                <p style="word-break: break-all">{{ el.content }}</p>
              </div>
            </div>
            <div
              class="chat mt-10px"
              v-if="chatList && chatList.length > 0"
              :style="{
                display: chatList[index].isChat ? 'block' : 'none'
              }"
            >
              <el-input
                placeholder="请输入评论内容"
                v-model="chatList[index].content"
                maxlength="200"
              >
                <template #append>
                  <el-button type="primary" @click="chatFn(item, index)"
                    >评论</el-button
                  >
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无数据" />
    </div>
    <!-- <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      v-model:page="queryForm.pageNum"
      v-model:limit="queryForm.pageSize"
      @pagination="getList"
    /> -->

    <!-- 回访弹窗 -->
    <VisitDia
      :dialogParam="visitDiaParam"
      @ok="saveFn"
      @close="visitDiaParam.isVisible = false"
    />
  </div>
</template>
<script setup name="VisitList">
import { useRoute, useRouter } from 'vue-router'
import * as Api from '@/api/common/common.js'
import { visitList, delVisit, getVisit } from '@/api/visit/visit'
import { computed } from 'vue'
import { strToArr, viewFile } from '@/utils/commo'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
import VisitDia from './visit'
const route = useRoute()
const props = defineProps({
  // 查询参数
  tableParam: {
    required: false
  }
})
const { proxy, type } = getCurrentInstance()
const { customer_status } = proxy.useDict('customer_status')
const lock = ref(0)
// 设置参数
const data = reactive({
  queryForm: {
    pageNum: 1,
    pageSize: 10
  },
  // 查询条件form表单配置
  queryFormOption: {
    menuPosition: 'right',
    menuSpan: 2,
    labelWidth: 0,
    submitBtn: false,
    emptyBtn: false,
    column: [
      {
        prop: 'keyword',
        placeholder: '请输入关键字',
        type: 'input',
        offset: 12,
        span: 4,
        change: ({ value, column }) => {
          queryForm.value.keyword = value
          getList()
        }
      },
      {
        type: 'daterange',
        prop: 'bidOpeningTime',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        span: 6,
        change: ({ value, column }) => {
          queryForm.value.bidOpeningTime = value
          getList()
        }
      }
    ]
  },
  // table 总数据
  tableTotal: 0,
  //table 数据
  tableData: [],
  visitDiaParam: {}, // 回访弹窗配置
  content: ''
})
const {
  tableData,
  tableTotal,
  queryForm,
  queryFormOption,
  content,
  visitDiaParam
} = toRefs(data)

const chatList = ref([])
watch(
  [() => props.tableParam],
  () => {
    if (props.tableParam && JSON.stringify(props.tableParam) != '{}') {
      console.info('回访记录==>', props.tableParam)
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  [() => route.query.tableParam, () => route.query.id],
  () => {
    if (
      route.query.tableParam &&
      route.query.tableParam != '{}' &&
      route.name == type.name
    ) {
      // console.log(route.name, ' == ', type.name)
      queryForm.value = {
        ...queryForm.value,
        ...JSON.parse(route.query.tableParam)
      }
      getList()
    }
    if (route.query.id && route.name == type.name) {
      queryForm.value = {
        ...queryForm.value,
        businessId: route.query.id
      }
      getList()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
/**
 * 初始化方法
 */
async function init() {
  queryForm.value = { ...queryForm.value, ...props.tableParam }
  getList()
}
//查询table列表
function getList() {
  let param = JSON.parse(JSON.stringify(queryForm.value))
  // console.log(queryForm.value.bidOpeningTime, 'ueryForm.value.bidOpeningTime--')
  param.followStartTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[0] + ' 00:00:00'
      : ''
  param.followEndTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[1] + ' 23:59:59'
      : ''
  delete param.bidOpeningTime
  chatList.value = []
  visitList(param).then(res => {
    tableData.value = res.rows
    tableTotal.value = res.total
    if (res.rows && res.rows.length > 0) {
      res.rows.forEach(item => {
        chatList.value.push({ isChat: false })
      })
    }
  })
}
// 导出
const handleDownload = () => {
  let param = JSON.parse(JSON.stringify(queryForm.value))
  param.followStartTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[0] + ' 00:00:00'
      : ''
  param.followEndTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[1] + ' 23:59:59'
      : ''
  delete param.bidOpeningTime
  delete param.pageNum
  delete param.pageSize
  proxy.downLoadByUrl(
    '/system/sysfucommit/export',
    param,
    `回访信息_${new Date().getTime()}.xlsx`
  )
}
// 删除记录
const delCmit = row => {
  proxy.$modal.confirm('是否删除该记录').then(async () => {
    const res = await delVisit(row.id)
    if (res.code === 200) {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    }
  })
}
//打开回访弹窗
function handleContinue(row) {
  // console.log('回访==》', visitDiaParam.value)
  /***订单模块 */
  getVisit(row.id).then(e => {
    visitDiaParam.value = { ...e.data }
    visitDiaParam.value.isVisible = true
    visitDiaParam.value.tableName = 'ord_order'
    visitDiaParam.value.diaTitle = '编辑记录'
    visitDiaParam.value.businessId = e.data.orderId
    visitDiaParam.value.productList = [
      { label: e.data.productName, value: e.data.productId }
    ]
  })
}
// 确认回访
function saveFn(e) {
  // console.log('e===>', e)
  getList()
}
// 预览文件
function viewFiles(url) {
  viewFile(url, useUserStore().userInfo.nickName)
}
</script>
<style lang="scss">
.followUpList .avue-form__menu.avue-form__menu--center {
  text-align: left !important;
}
.followUpList-cnt {
  a:focus,
  a:hover {
    color: #1890ff;
  }
  .chatCnt {
    @apply relative pl-20px;
    .chatCnt-box {
      @apply relative bg-#f7fbfe border-1px border-#d7e8f4 border-solid p-15px text-14px text-#999  mt-20px;
      &::after {
        content: '';
        @apply absolute top-0 left--25px h-10px w-10px bg-#fff border-#0079fe  border-2px border-solid rounded z-1;
      }
    }
    &::after {
      content: '';
      @apply absolute top-0 left-0 h-100% w-1px bg-#ccc;
    }
  }
  .comment-box {
    @apply bg-#fff border-1px border-#d7e8f4 border-solid px-15px mb-15px;
  }
  .el-input-group__append button.el-button,
  .el-input-group__append button.el-button:hover {
    @apply bg-#0079fe text-#fff;
  }
}
</style>
